<template>
  <div>
    <!-- // 课程弹框 -->
    <a-modal
      title="选择课程"
      :visible="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      style="top: 150px;"
      width="580px"
      :bodyStyle="{padding:'16px'}"
    >
      <!-- <a-select style="width: 200px" v-model="queryParam.structures_id" @change="change">
        <a-select-option
          v-for="(item,index) in schoolSelect"
          :key="index"
          :value="item.id"
        >{{item.name}}</a-select-option>
      </a-select>-->
      <div v-for="(item,index) in schoolSelect" :key="index">
        <div
          v-if="id==item.id"
          style="margin-bottom:10px;width:500px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
        >当前选择校区：<b style="font-size:16px;">{{item.name}}</b></div>
      </div>
      <div v-if="!id">
        <a-form-model :labelCol="{span:5}" :wrapperCol="{span:15}">
          <a-row>
            <a-col :span="18">
              <a-form-model-item style="margin-bottom:10px">
                <a-input
                  placeholder="请选择搜索课程(回车搜索)"
                  style="width:90%"
                  v-model="keywords"
                  @pressEnter="getData()"
                >
                  <a-tooltip slot="suffix" title="请输入搜索课程">
                    <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="searchcurse" />
                  </a-tooltip>
                </a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>

      <a-table
        :columns="columns"
        :dataSource="loadData"
        class="user_management_table"
        style="max-height:400px;overflow-y:auto;border:1px solid #e8e8e8;"
        :rowSelection="rowSelection"
        :rowKey="(record) => record.id"
        :pagination="false"
      ></a-table>
    </a-modal>
  </div>
</template>
<script>
import { STable } from '@/components'
import { newCoursesList } from '@/api/courseCharge'
import { campusList } from '@/api/structure'
export default {
  name: 'courseModel',
  components: {
    STable
  },
  props:['able','isdisable'],
  inject: ['reload'],
  data() {
    return {
      visible: false,
      confirmLoading: false,
      selectedRowKeys: [],
      tableData: [],
      id: null,
      schoolSelect: [], //校区
      keywords: '',
      queryParam: {
        school_id: this.$store.state.user.school,
        pageSize: 9999999999
      },
      columns: [
        {
          title: '课程名称',
          dataIndex: 'name',
          fixed: 'left',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '类型',
          dataIndex: 'type',
          align: 'center',
          customRender(type) {
            return type == 1 ? '一对一' : '一对多' //1是男，2是女
          }
        }
        // {
        //   title: '单价',
        //   dataIndex: 'price_arr',
        //   align: 'center', //,
        //   scopedSlots: { customRender: 'price_arr' }
        // }
      ],
      loadData: []
    }
  },
  watch: {
    visible(val) {
      if (val == false) {
        this.selectedRowKeys = []
      }
    },
    id(val) {
      this.getData()
    }
  },
  computed:{
    rowSelection(){
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          // this.selectedRowKeys=selectedRows
        },
        type:'radio',
        getCheckboxProps: record => ({
          props: {
            disabled: record.id ===this.isdisable?true:false, // Column configuration not to be checked
          },
        }),
      }
    }
  },
  methods: {
    //搜索
    searchcurse() {
      this.getData()
    },
    name() {},
    showModal(val, id) {
      // 
      this.selectedRowKeys = val
      this.id = id
      this.visible = true
      console.log(this.able)
      this.getData()
    },
    getData() {
      this.confirmLoading = true
      campusList({
        school_id: this.$store.state.user.school,
        pageSize: 99999999999999,
        is_enable:this.able?1:undefined
      }).then(res => {
        this.schoolSelect = res
      })
      newCoursesList(
        Object.assign(this.queryParam, {
          structures_id: this.id,
          is_enable:this.able?1:undefined
        })
      ).then(res => {
        this.confirmLoading = false
        this.loadData = JSON.parse(JSON.stringify(res.data))
      })
    },
    handleCancel(e) {
      this.visible = false
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleOk() {
      console.log(this.selectedRowKeys)
      if (this.selectedRowKeys.length > 0) {
        let data = []
        this.selectedRowKeys.forEach(val => {
          this.loadData.forEach(item => {
            if (val == item.id) {
              data.push(item)
            }
          })
        })
        this.visible = false
        this.$emit('receive', data)
      }
    }
  },
}
</script>